<template>
  <!-- 客户列表 -->
  <div>
    <van-nav-bar
      title="客户列表信息"
      right-text="新增"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="客户名称/联系方式"
      show-action
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div v-show="CustListData !== 0 ? true : false">
      <div class="bigbox" v-for="item in CustListData" :key="item.id" >
        <div class="cont" @click="godetails(item.id)">
          <van-row type="flex">
            <van-col span="4">客户名称</van-col>
            <van-col span="20">{{ item.custName }}</van-col>
          </van-row>
          <van-row type="flex">
            <van-col span="4">联系方式</van-col>
            <van-col span="20">{{ item.telephone }}</van-col>
          </van-row>
          <van-row type="flex">
            <van-col span="4">公司名称</van-col>
            <van-col span="20">{{ item.company }}</van-col>
          </van-row>
          <van-row type="flex">
            <van-col span="2">职务</van-col>
            <van-col span="22">{{ item.position }}</van-col>
          </van-row>
        </div>
        <div class="btn">
          <van-button round type="info">新增拜访</van-button>
          <van-button round type="info">拜访记录</van-button>
        </div>
      </div>
      <div class="foot" @click="moreClick" v-show="size == '3' ? true : false">
        <span>展示更多<van-icon name="arrow-down" /></span>
      </div>
    </div>
    <van-empty
      description="查无结果"
      v-show="CustListData == 0 ? true : false"
    />
  </div>
</template>

<script>
import { GetCustListData } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      CustListData: [],
      // 条数数
      size: "3",
      isShow: true,
    };
  },
  methods: {
    onClickLeft() {
      console.log("返回");
      this.$router.go(-1)
    },
    onClickRight() {
      console.log("按钮");
    },
    onSearch(val) {
      console.log(val);
      GetCustListData({
        keyword: this.value,
        current: "1",
        size: this.size,
      }).then((res) => {
        console.log(res);
        this.CustListData = res.data.records;
      });
    },
    moreClick() {
      this.size = "20";
      GetCustListData({
        keyword: this.value,
        current: "1",
        size: this.size,
      }).then((res) => {
        this.CustListData = res.data.records;
      });
    },
    // 点击跳转到客户详情视图
    godetails(val){
        this.$router.push("/userdetails?id=" + val)
    }
  },
  created() {
    GetCustListData({
      keyword: this.value,
      current: "1",
      size: this.size,
    }).then((res) => {
      console.log(res);
      this.CustListData = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
.bigbox {
  background-color: #fff;
  margin-top: 10px;
  .cont {
    padding: 10px 0;
    margin: 0 20px;
    border-bottom: 1px #ccc solid;
  }
}
.van-row {
  padding: 2px 0;
  .van-col--4,
  .van-col--2 {
    color: rgb(141, 139, 139);
  }
}
.btn {
  text-align: right;
  padding: 10px;
  .van-button {
    background-color: blue;
    border: blue;
    height: 35px;
    width: 90px;
    margin: 0 10px;
  }
}
.foot {
  background-color: #fff;
  margin-top: 10px;
  text-align: center;
  span {
    line-height: 40px;
    color: blue;
  }
}
.van-empty{
    width: 100%;
    height: 100%;
}
</style>